<template>
  <div class="movie-box">
    <van-image class="cover-image" :src="movie.image" radius="5px">
      <template v-slot:error>
        <img
          class="cover-image"
          src="https://cdn.pixabay.com/photo/2020/09/25/16/50/portrait-5601950_960_720.jpg"
        />
      </template>
    </van-image>
    <div class="title">{{ movie.title }}</div>
    <!-- <Star :rating="movie.rating" /> -->
  </div>
</template>
<script>
import { defineComponent } from "vue";
import { Image } from "vant";
import Star from "./Star";
export default defineComponent({
  components: {
    [Image.name]: Image,
    Star,
  },
  props: ["movie"],
});
</script>
<style scoped>
.movie-box {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 205px;
  margin-left: 10px;
}
.cover-image {
  width: 100px;
  height: 145px;
}
.title {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
  text-align: left;
  font-weight: bold;
}
</style>